// 主页
<template>
    <div>
        <mu-appbar title="广州">
            <mu-icon-button icon='search' slot="left" />
            <mu-icon-button icon='expand_more' slot="right" />
        </mu-appbar>
        <mu-tabs :value="activeTab" class="view-tabs" @change="handleTabChange">
            <mu-tab value="recommend" title="推荐" />
            <mu-tab value="facialBeauty" title="面部美容" />
            <mu-tab value="plastic" title="美体塑性" />
            <mu-tab value="health" title="四季养生" />
            <mu-tab value="medicine" title="光电医学" />
        </mu-tabs>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeTab: 'recommend'
            }
        },
        methods: {
            handleTabChange(val) {
                this.activeTab = val
                this.$router.push({ path: '/index/' + val })
            }
        },
        created() {
            // 当created函数时监测路由信息,防止页面刷新tab高亮错误
            var tmpArr = this.$route.path.split('/')
            if (tmpArr[1] === 'index') {
                this.handleTabChange(tmpArr[2])
            }
        },
        // watch函数监测路由的变化,保持tab面板的高亮位置正确
        watch: {
            '$route'(to, from) {
                const path = to.path
                var tmpArr = path.split('/')
                if (tmpArr[1] === 'index') {
                    this.handleTabChange(tmpArr[2])
                }
            }
        },
    }
</script>
<style lang="less" scoped>
    @import "../assets/theme.less";
    @color: #d1506d;
    .mu-appbar{
        background: #fff;
        color: @color;
        height: 44px;
    }
     .view-tabs {
    background-color: #fff;
    color: rgba(0,0,0,.87);
    >.mu-tab-link {
      color: rgba(102,102,102,1);
    }
    >.mu-tab-active{
      color: @color;
    }
  }


</style>